<template>
  <article class="innerPage authorityList">
    <header class="breadcrumb">
      <x-breadcrumb :title="$route.meta.breadcrumb" :path="$route.path"> </x-breadcrumb>
    </header>
    <div style="padding: 0 10px">
      <ul class="type_select">
        <div>
          <li>
            <div class="demonstration">权限类型</div>
            <div class="input_num4">
              <el-select clearable v-model="filterData.type" placeholder="请选择">
                <el-option v-for="item in authorityType" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </li>
          <li style="margin: 0 10px">
            <div class="demonstration">关键词</div>
            <el-input
              v-model="filterData.keywords"
              placeholder="请输入"
              @keyup.enter.native="search"
              class="input_num3"
            ></el-input>
          </li>
        </div>

        <li class="operation_btn">
          <button @click="search" class="operation_btn2">查询</button>
          <button @click="reset" class="operation_btn1">重置</button>
        </li>
      </ul>
    </div>
    <div class="decorate"></div>
    <section>
      <div class="actionBar">
        <div class="btn_add">
          <el-button
            icon="el-icon-circle-plus-outline"
            class="btn-green icon-fontSize"
            @click="pageTurn('/systemSetting/authorityList/add')"
            v-alive
            >添加权限</el-button
          >
        </div>
        <div class="btn_add">
          <button v-alive @click="elDialogVisible = true">
            <span>系统菜单排序</span>
          </button>
        </div>
      </div>
      <el-table
        ref="elTable"
        stripe
        :border="$isborder"
        row-key="id"
        :data="resDetail.data"
        class="tableStyle"
        :header-cell-style="$headerCellStyle"
        size="mini"
      >
        <el-table-column
          fixed
          type="index"
          :index="indexMethod"
          label="序号" label-class-name="indexColumn"
          align="center"
          :width="$widtha"
          
        >
        </el-table-column>
        <el-table-column prop="type" label="类型" :formatter="typeFormatter" align="left"> </el-table-column>
        <el-table-column prop="permission_name" label="权限名称" :width="$widthb" align="left">
          <template slot-scope="scope">
            <el-tooltip placement="top">
              <div slot="content" style="width: 140px">
                {{ scope.row.permission_name }}
              </div>
              <p class="ellipsisText">{{ scope.row.permission_name }}</p>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="pid" label="父级ID" :width="$widtha" align="left"> </el-table-column>
        <el-table-column prop="id" label="ID" :width="$widtha" align="left">
          <template slot-scope="scope">
            <div style="padding: 15px 0">
              {{ scope.row.id }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="order" label="排序" :width="$widtha" align="left"> </el-table-column>
        <el-table-column prop="path_name" label="页面路径" :width="$widthb" align="left">
          <template slot-scope="scope">
            <el-tooltip placement="top">
              <div slot="content" style="width: 140px">
                {{ scope.row.path_name }}
              </div>
              <p class="ellipsisText">{{ scope.row.path_name }}</p>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="route_path" label="路由路径" :width="$widthb" align="left">
          <template slot-scope="scope">
            <el-tooltip placement="top">
              <div slot="content" style="width: 140px">
                {{ scope.row.route_path }}
              </div>
              <p class="ellipsisText">{{ scope.row.route_path }}</p>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="route_name" label="路由别名" :width="$widthb" align="left">
          <template slot-scope="scope">
            <el-tooltip placement="top">
              <div slot="content" style="width: 140px">
                {{ scope.row.route_name }}
              </div>
              <p class="ellipsisText">{{ scope.row.route_name }}</p>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="api_path" label="接口路径" :width="$widthb" align="left">
          <template slot-scope="scope">
            <el-tooltip placement="top">
              <div slot="content" style="width: 140px">
                {{ scope.row.api_path }}
              </div>
              <p class="ellipsisText">{{ scope.row.api_path }}</p>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="icon" label="icon名称" :width="$widthb" align="left">
          <template slot-scope="scope">
            <el-tooltip placement="top">
              <div slot="content" style="width: 140px">
                {{ scope.row.icon }}
              </div>
              <p class="ellipsisText">{{ scope.row.icon }}</p>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" min-width="160" fixed="right" :header-align="$heaerOpt">
          <template slot-scope="{ row }">
            <div class="btnFrom-box">
              <div class="details-box" @click="tableActions(row, 'revise')">修改</div>
              <div class="delete-box" @click="tableActions(row, 'delete')"><span></span> 删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </section>
    <footer class="pagination">
      <div>
        <el-pagination
          background
          prev-text="上一页"
          next-text="下一页"
          layout="prev, pager, next, jumper"
          :total="resDetail.total"
          :page-size="filterData.limit"
          @current-change="selectPage"
          :current-page.sync="resDetail.current_page"
        >
        </el-pagination>
        
      </div>
      <p>
        共<span>{{ resDetail.total || 0 }}</span
        >数据
      </p>
    </footer>

    <!-- 对话框 -->
    <x-dialog
      :visible="dialogVisible"
      dangerBtnText="删除"
      infoBtnText="取消"
      @cancel="dialogVisible = false"
      @confirm="dialogConfirm"
    >
      <div class="dialogContent">
        <x-svg-icon iconName="dialogCaution" className="iconClass"> </x-svg-icon>
        <p>确认删除 {{ presentContent }} 吗？删除后将无法恢复。</p>
      </div>
    </x-dialog>
    <el-dialog title="系统菜单排序" :visible.sync="elDialogVisible" width="600px" :close-on-click-modal="false" center>
      <div class="el-dialog-content">
        <el-tree
          draggable
          ref="authTree"
          node-key="id"
          :data="authorityTree"
          :allow-drop="allowDrop"
          @node-drag-end="handleDragEnd"
          :props="{
            children: 'children',
            label: 'permission_name',
          }"
        >
        </el-tree>
        <p>
          <span>* 拖拽列表即可排序</span>
          <span>* 保存成功后重新登录即可生效</span>
        </p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="dragTree.length === 0" @click="dialogHandle('confirm')"> 确 定 </el-button>
        <el-button type="info" @click="dialogHandle('cancel')">取 消</el-button>
      </div>
    </el-dialog>
  </article>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      filterData: {
        type: "0",
        keywords: "",
        keywords_type: "0",
        page: 1,
        limit: 10,
      },
      authorityType: [
        {
          value: "0",
          label: "全部",
        },
        {
          value: "1",
          label: "菜单",
        },
        {
          value: "2",
          label: "页面",
        },
        {
          value: "3",
          label: "按钮",
        },
      ],
      keywordType: [
        {
          value: "0",
          label: "全部",
        },
        {
          value: "permission_name",
          label: "权限名称",
        },
        {
          value: "pid",
          label: "父级id",
        },
        {
          value: "route_name",
          label: "路由别名",
        },
        {
          value: "api_path",
          label: "api路径",
        },
        {
          value: "view_name",
          label: "命名视图",
        },
      ],
      resDetail: {
        data: [],
      },
      presentId: "",
      presentContent: "",
      dialogVisible: false,
      elDialogVisible: false,
      dragTree: [],
    }
  },
  activated() {
    if (this.$route.params.action == "refresh" || this.$isFirstInPage.get()) {
      this.resDetail.data = []
      this.filterData.type = "0"
      this.filterData.keywords = ""
      this.filterData.page = 1

      this.api()
    }

    this.setPageTabs()
    this.$refs?.elTable?.doLayout()
  },
  mounted() {},
  computed: {
    authorityTree() {
      let authorityTree = localStorage.getItem("authorityTree")
      if (authorityTree) {
        authorityTree = JSON.parse(authorityTree)
      }
      return authorityTree
    },
  },
  methods: {
    //重置
    reset() {
      this.filterData.type = "0"
      this.filterData.keywords = ""
      this.filterData.page = 1
      this.api()
    },
    //查询
    search() {
      this.filterData.page = 1
      this.api()
    },
    indexMethod(i) {
      return i + 1 + (this.resDetail.current_page - 1) * 10
    },
    typeFormatter(row) {
      let type = this.authorityType.filter((item) => row.type - 0 === item.value - 0)
      return type[0]?.label
    },
    allowDrop(draggingNode, dropNode, type) {
      if (draggingNode.parent.id === dropNode.parent.id && type !== "inner") {
        return true
      } else {
        return false
      }
    },
    handleDragEnd() {
      this.dragTree = this.$refs.authTree.children
    },
    dialogHandle(type) {
      if (type === "cancel") {
        this.dragTree = []
        this.elDialogVisible = false
      } else if (type === "confirm") {
        let orders = []
        let node = this.dragTree
        this.ergodicDragTree(node, orders)
        orders = orders.map((item, i) => {
          item.order = i + 1
          return item
        })
        this.orderChange(orders)
        console.log(orders)
      }
    },
    ergodicDragTree(node, orders) {
      node.forEach((item) => {
        orders.push({ id: item.id, order: "" })
        if (item.children && item.children.length) {
          this.ergodicDragTree(item.children, orders)
        }
      })
    },
    async orderChange(orders) {
      try {
        let res = await this.request({
          url: "/admin/permission/orderChange",
          method: "post",
          data: {
            orders: JSON.stringify(orders),
          },
        })
        this.$message({
          showClose: true,
          message: res.msg,
          type: "success",
        })
        this.elDialogVisible = false
      } catch (err) {
        this.errorHandler(err)
      }
    },
    // 获取数据
    async api() {
      try {
        let res = await this.request({
          url: "/admin/permission/list",
          method: "get",
          data: {
            ...this.filterData,
          },
        })
        this.resDetail = res.content
      } catch (err) {
        this.resDetail = { data: [], total: 0, current_page: 0, selectPage: 1 }
        this.errorHandler(err)
      }
    },
    tableActions(row, type) {
      this.presentId = row.id
      this.presentContent = row.permission_name
      if (type === "revise") {
        this.pageTurn("/systemSetting/authorityList/revise", {
          id: row.id,
        })
      } else if (type === "delete") {
        this.dialogVisible = true
      }
    },
    async dialogConfirm() {
      try {
        let res = await this.request({
          url: "/admin/permission/del",
          method: "post",
          data: {
            id: this.presentId,
          },
        })
        this.$message({
          showClose: true,
          message: res.msg,
          type: "success",
        })
        this.dialogVisible = false
        setTimeout(() => {
          this.api()
        }, 1000)
      } catch (err) {
        this.errorHandler(err)
      }
    },
    selectPage(i) {
      this.filterData.page = i
      this.api()
    },
  },
  watch: {},
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
